<template>
  <div
    id="main"
    :style="{ width: '100%', height: '100%' }"
  />
</template>

<script>
// import axios from 'axios'
// const YCS = require('../plugins/140825.json')
import YCS from '../plugins/140825.json'
export default {
  name: 'App',
  components: {},
  mounted () {
    this.initChart()
  },
  methods: {
    initChart () {
      // var myChart = this.$echarts.init(document.getElementById('main'))
      var chart
      // var uploadedDataURL = '/asset/get/s/data-1528971808162-BkOXf61WX.json'
      // axios.get(YCS).then((res) => {
      this.$echarts.registerMap('china', YCS)
      chart = this.$echarts.init(document.getElementById('main'))
      chart.setOption({
        geo: [
          {
            map: 'china', // 这个名字对应上边registerMap中的第一个参数
            roam: false, // false禁止地图缩放移动
            zoom: 11, // zoom 放大地图
            aspectScale: 1, // 拉伸地图

            center: [110.97, 34.90], // 调整地图中心位置以经纬度来计算
            selectedMode: 'single', // single为单选--------multiple可以多选
            label: {
              show: true, // 显示地图各自名称
              color: '#fff'
            },
            itemStyle: {
              areaColor: '#54054055', // 调整地图块颜色
              borderColor: 'red', // 地图描边框颜色
              borderWidth: 2 // 地图描边框厚度
            },
            emphasis: {
              focus: 'self', // self选中地图块的区域高亮,别的淡隐---默认是none
              itemStyle: {
                areaColor: '#1be717' // 鼠标滑过地图hover高亮
              },
              label: {
                color: 'red'
              }
            },
            regions: [{
              name: '绛县',
              selected: true
            }]

          }
        ],
        series: [{
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: [{
            name: '北苏村',
            value: [111.190757, 35.748779],
            label: {
              show: true,
              position: [20, -10],
              formatter: '{b}'
            }
          }, {
            name: '南范庄',
            value: [111.13844, 35.759364],
            label: {
              show: true,
              position: [-40, -10],
              distance: 5.5,
              formatter: '{b}'
            }
          }, {
            name: '泽掌镇',
            value: [111.162437, 35.719424],
            label: {
              show: true,
              position: [-15, 20],
              distance: 5.5,
              formatter: '{b}'
            }
          }],
          rippleEffect: {
            scale: 17,
            color: '#320352',
            brushType: 'stroke'
          },
          symbol: 'diamond',
          symbolSize: 4,
          label: {
            show: true,
            position: 'top',
            distance: 5.5,
            formatter: '{b}'
          }
        }],
        tooltip: {

        }
      })
      // })
    }
  }
}
</script>

<style scoped lang='scss'>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  width: 100%;
  height: 100%;
  #main {
    margin: auto;
  }
}
</style>
